<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="info-modal-content">
      <div class="icon-wrapper" :class="type">
        <svg v-if="type === 'success'" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        <svg v-else-if="type === 'error'" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
      </div>
      <h3 class="title">{{ title }}</h3>
      <p class="message">{{ message }}</p>
      <button class="btn btn-primary" @click="$emit('close')">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  type: 'success' | 'error';
  title: string;
  message: string;
}>();
</script>

<style scoped>
@import '@/assets/styles/components/InfoModal.css';
</style>
